<template>
	<div style="width: 90%; margin-left: 5%;">
		<el-divider><i class="el-icon-mobile-phone"> 机票详情</i></el-divider>
		<el-card style="margin-top: 30px; text-align: left;" shadow="always">
			<el-row :gutter="20">
				<el-col :span="6">
					<el-link type="text">起飞城市：{{ticketInfo.startCity}}</el-link>
				</el-col>
				<el-col :span="6">
					<el-link type="text">抵达城市：{{ticketInfo.arriveCity}}</el-link>
				</el-col>
				<el-col :span="6">
					<el-link type="text">起飞时间：{{ticketInfo.startDate}}</el-link>
				</el-col>
				<el-col :span="6">
					<el-link type="text">抵达时间：{{ticketInfo.arriveDate}}</el-link>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="6">
					<el-link type="text">起飞城市三字码：{{ticketInfo.startCityCode}}</el-link>
				</el-col>
				<el-col :span="6">
					<el-link type="text">抵达城市三字码：{{ticketInfo.arriveCityCode}}</el-link>
				</el-col>
				<el-col :span="6">
					<el-link type="text">航空公司：{{ticketInfo.gds}}</el-link>
				</el-col>
				<el-col :span="6">
					<el-link type="text">票面价：{{ticketInfo.price}}</el-link>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="6">
					<el-link type="text">舱等：
						<span v-if="ticketInfo.ticketLevel == 0">商务座</span>
						<span v-if="ticketInfo.ticketLevel == 1">一等座</span>
						<span v-if="ticketInfo.ticketLevel == 2">二等舱</span>
						<span v-if="ticketInfo.ticketLevel == 3">三等舱</span>
						<span v-if="ticketInfo.ticketLevel == 4">四等舱</span>
					</el-link>
				</el-col>
				<el-col :span="6">
					<el-link type="text">机票编号：{{ticketInfo.flightNumber}}</el-link>
				</el-col>
				<el-col :span="6">
					<el-link type="text">座位号：{{ticketInfo.seatNumber}}</el-link>
				</el-col>
				<el-col :span="6">
					<el-link type="text">飞机型号：
						<span v-if="ticketInfo.aircraftNumber == 0">大型客机</span>
						<span v-if="ticketInfo.aircraftNumber == 1">中型客机</span>
						<span v-if="ticketInfo.aircraftNumber == 2">小型客机</span>
					</el-link>
				</el-col>
			</el-row>
		</el-card>
		<el-divider><i class="el-icon-mobile-phone"> 可用优惠券列表</i></el-divider>
		<el-card style="margin-top: 30px;" shadow="always">
			<div v-if="!hasCoupon" style="text-align: center; font-size: 13px;">
				<el-link type="primary" @click="getCoupon">暂时没有优惠券嗷，去 领取</el-link>
			</div>
			<div v-if="hasCoupon">
				<div style="text-align: left; margin-top: 20px;" v-for="(item,index) in couponList" :key="index">
					<el-row :gutter="20">
						<el-col :span="9">
							<el-link type="text">编号：{{item.couponNumber}}</el-link>
						</el-col>
						<el-col :span="3">
							<el-link type="text">满：{{item.fullMoney}}</el-link>
						</el-col>
						<el-col :span="3">
							<el-link type="text">减：{{item.reduceMoney}}</el-link>
						</el-col>
						<el-col :span="3">
							<el-link type="text">描述：{{item.des}}</el-link>
						</el-col>
						<el-col :span="3">
							<el-link type="text">起飞城市：{{item.startCity}}</el-link>
						</el-col>
						<el-col :span="3">
							<el-link type="text">抵达城市：{{item.endCity}}</el-link>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="9">
							<el-link type="text">有效使用时间段：{{item.effectiveStartTime}} - {{item.effectiveEndTime}}
							</el-link>
						</el-col>
						<el-col :span="3">
							<el-link type="text">券状态：
								<!-- 1 在线 0 下架 2被占用 3 被使用 -->
								<span v-if="item.status == 0">下架</span>
								<span v-if="item.status == 1">在线</span>
								<span v-if="item.status == 2">未使用</span>
								<span v-if="item.status == 3">已使用</span>
							</el-link>
						</el-col>
						<el-col :span="12">
							<el-link type="primary" @click="selectCoupon(item.couponNumber,index)">
							</el-link>
							<template>
								<el-radio v-model="selectCouponNumber" :label="index">选中</el-radio>
							</template>
						</el-col>
					</el-row>
				</div>
			</div>
		</el-card>
		<div style="text-align: right;margin-top: 30px; margin-bottom: 50px;">
			<el-button type="primary" size="small" @click="preOrder"> 预定</el-button>
		</div>
		<el-dialog @closed="toUserSelf" title="付款" :visible.sync="dialogFormVisible">
			<div style="text-align: center;margin-bottom: 20px;">
				<p>尊敬的
					{{orderInfo.reallyName}}({{orderInfo.nickName}}),您购买的行程信息为：{{orderInfo.startCity}}({{orderInfo.startCityCode}})
					-> {{orderInfo.arriveCity}}({{orderInfo.arriveCityCode}}) </p>
				<p>起飞时间：{{orderInfo.startDate}} 抵达时间: {{orderInfo.arriveDate}}</p>
				<p>
					<span v-if="orderInfo.couponNumber !== ''">
						您需要付款 {{orderInfo.price - orderInfo.reduceMoney}} 元,其中优惠券抵扣 {{orderInfo.reduceMoney}} 元
					</span>
					<span v-if="orderInfo.couponNumber == ''">
						您需要付款 {{orderInfo.price}} 元
					</span>
				</p>
				<p>请在15分钟之内完成付款, {{orderInfo.gds}} 航空公司祝您旅途愉快</p>
			</div>
			<img style="width: 200px;height: 250px;" src="../../assets/pay/pay.png" alt="">
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="toUserSelf">取 消</el-button>
				<el-button size="small" type="primary" @click="toUserSelfBuy">支付完成</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: "OrderBook",
		components: {},
		data() {
			return {
				ticketInfo: {},
				// 可能有多个优惠券
				couponList: [],
				hasCoupon: false,
				selectCouponNumber: '',
				status: '使用',
				dialogFormVisible: false,
				orderInfo: {
				}
			}
		},
		created() {

		},
		mounted() {
			let vm = this
			vm.ticketInfo = JSON.parse(vm.$cookie.get("ticketInfo"))
			// 查询机票列表
			vm.searchTargetCoupon()
		},
		methods: {
			searchTargetCoupon() {
				let vm = this
				// 判断登录
				let id = vm.$cookie.get('id');
				if (typeof(id) == "undefined" || id == null) {
					vm.$message.warning("请先登录");
					return
				}
				axios({
					method: 'get',
					url: vm.$dev.BASE_URL +
						'/coupon-service/coupon/queryUserCouponsByTargetSECity/' + id + "/" +
						vm.ticketInfo.startCity + "/" + vm.ticketInfo.arriveCity,
				}).then(function(res) {
					console.log(res)
					if (res.data.success) {
						vm.$message.success(res.data.message);
						vm.hasCoupon = true
						vm.couponList = res.data.data.couponList
						vm.couponList.forEach((val) => {
							val.isUsed = '使用'
						})
					} else {
						vm.$message.warning(res.data.message);
						vm.hasCoupon = false
					}
				});
				// 查询对应的优惠券
				// 冗余用户信息、订单信息、机票信息、优惠券信息
			},
			getCoupon() {
				this.$router.push('/ECheng')
			},
			preOrder() {
				let vm = this
				let userId = vm.$cookie.get("id")
				let couponNumber = ''
				console.log(vm.selectCouponNumber)
				vm.couponList.forEach((val, index) => {
					if (index == vm.selectCouponNumber) {
						couponNumber = val.couponNumber
					}
				})
				// 下单传递用户机票信息、用户信息、优惠券信息
				let preTicket = {
					flightNumberId: vm.ticketInfo.id,
					couponNumber: couponNumber,
					userId: userId
				}
				// 预定之后给出弹框付款 然后跳转到个人中心
				axios({
					method: 'post',
					dataType: 'json',
					contentType: 'application/json;charset=UTF-8',
					url: vm.$dev.BASE_URL + '/order-service/order/preOrder',
					data: preTicket,
				}).then(function(res) {
					if (res.data.success) {
						vm.dialogFormVisible = true
						vm.$message.success(res.data.message);
						vm.orderInfo = res.data.data.orderInfo
					} else {
						console.log(res.data)
						vm.$message.warning(res.data.message);
					}
				})
			},
			toUserSelf() {
				let vm = this
				vm.dialogFormVisible = false
				vm.$router.push('/UserInfo')
			},
			toUserSelfBuy() {
				let vm = this
				// 支付
				axios({
					method: 'get',
					url: vm.$dev.BASE_URL + '/order-service/order/bookPay/' + vm.orderInfo.orderId,
				}).then(function(res) {
					if (res.data.success) {
						vm.dialogFormVisible = true
						vm.$message.success(res.data.message);
					} else {
						vm.$message.warning(res.data.message);
					}
				})
				vm.dialogFormVisible = false
				vm.$router.push('/UserInfo')
			}
		}
	}
</script>

<style>
</style>
